/** cmp复杂控件的css
 * Created by yangchao on 2016/6/6.
 */


//picker控件样式


.cmp-backdrop{
  position: fixed;
  z-index: 998;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .3);
}

input[type='button'],
input[type='submit'],
input[type='reset'],
button,
.cmp-btn
{
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42;

  position: relative;

  display: inline-block;

  margin-bottom: 0;
  padding: 6px 12px;

  cursor: pointer;
  -webkit-transition: all;
  transition: all;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;

  color: #333;
  border: 1px solid #ccc;
  border-radius: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  background-color: #fff;
  background-clip: padding-box;
}
input[type='button']:enabled:active, input[type='button'].cmp-active:enabled,
input[type='submit']:enabled:active,
input[type='submit'].cmp-active:enabled,
input[type='reset']:enabled:active,
input[type='reset'].cmp-active:enabled,
button:enabled:active,
button.cmp-active:enabled,
.cmp-btn:enabled:active,
.cmp-btn.cmp-active:enabled
{
  color: #fff;
  background-color: #929292;
}
input[type='button']:disabled, input[type='button'].cmp-disabled,
input[type='submit']:disabled,
input[type='submit'].cmp-disabled,
input[type='reset']:disabled,
input[type='reset'].cmp-disabled,
button:disabled,
button.cmp-disabled,
.cmp-btn:disabled,
.cmp-btn.cmp-disabled
{
  opacity: .6;
}

input[type='submit'],
.cmp-btn-primary, .cmp-btn-blue
{
  color: #fff;
  border: 1px solid #007aff;
  background-color: #007aff;
}
input[type='submit']:enabled:active, input[type='submit'].cmp-active:enabled,
.cmp-btn-primary:enabled:active,
.cmp-btn-primary.cmp-active:enabled, .cmp-btn-blue:enabled:active, .cmp-btn-blue.cmp-active:enabled
{
  color: #fff;
  border: 1px solid #0062cc;
  background-color: #0062cc;
}

.cmp-btn-positive, .cmp-btn-success, .cmp-btn-green
{
  color: #fff;
  border: 1px solid #4cd964;
  background-color: #4cd964;
}
.cmp-btn-positive:enabled:active, .cmp-btn-positive.cmp-active:enabled, .cmp-btn-success:enabled:active, .cmp-btn-success.cmp-active:enabled, .cmp-btn-green:enabled:active, .cmp-btn-green.cmp-active:enabled
{
  color: #fff;
  border: 1px solid #2ac845;
  background-color: #2ac845;
}

.cmp-btn-warning, .cmp-btn-yellow
{
  color: #fff;
  border: 1px solid #f0ad4e;
  background-color: #f0ad4e;
}
.cmp-btn-warning:enabled:active, .cmp-btn-warning.cmp-active:enabled, .cmp-btn-yellow:enabled:active, .cmp-btn-yellow.cmp-active:enabled
{
  color: #fff;
  border: 1px solid #ec971f;
  background-color: #ec971f;
}

.cmp-btn-negative, .cmp-btn-danger, .cmp-btn-red
{
  color: #fff;
  border: 1px solid #dd524d;
  background-color: #dd524d;
}
.cmp-btn-negative:enabled:active, .cmp-btn-negative.cmp-active:enabled, .cmp-btn-danger:enabled:active, .cmp-btn-danger.cmp-active:enabled, .cmp-btn-red:enabled:active, .cmp-btn-red.cmp-active:enabled
{
  color: #fff;
  border: 1px solid #cf2d28;
  background-color: #cf2d28;
}

.cmp-btn-royal, .cmp-btn-purple
{
  color: #fff;
  border: 1px solid #8a6de9;
  background-color: #8a6de9;
}
.cmp-btn-royal:enabled:active, .cmp-btn-royal.cmp-active:enabled, .cmp-btn-purple:enabled:active, .cmp-btn-purple.cmp-active:enabled
{
  color: #fff;
  border: 1px solid #6641e2;
  background-color: #6641e2;
}

.cmp-btn-grey
{
  color: #fff;
  border: 1px solid #c7c7cc;
  background-color: #c7c7cc;
}
.cmp-btn-grey:enabled:active, .cmp-btn-grey.cmp-active:enabled
{
  color: #fff;
  border: 1px solid #acacb4;
  background-color: #acacb4;
}

.cmp-btn-outlined
{
  background-color: transparent;
}
.cmp-btn-outlined.cmp-btn-primary, .cmp-btn-outlined.cmp-btn-blue
{
  color: #007aff;
}
.cmp-btn-outlined.cmp-btn-positive, .cmp-btn-outlined.cmp-btn-success, .cmp-btn-outlined.cmp-btn-green
{
  color: #4cd964;
}
.cmp-btn-outlined.cmp-btn-warning, .cmp-btn-outlined.cmp-btn-yellow
{
  color: #f0ad4e;
}
.cmp-btn-outlined.cmp-btn-negative, .cmp-btn-outlined.cmp-btn-danger, .cmp-btn-outlined.cmp-btn-red
{
  color: #dd524d;
}
.cmp-btn-outlined.cmp-btn-royal, .cmp-btn-outlined.cmp-btn-purple
{
  color: #8a6de9;
}
.cmp-btn-outlined.cmp-btn-primary:enabled:active, .cmp-btn-outlined.cmp-btn-blue:enabled:active, .cmp-btn-outlined.cmp-btn-positive:enabled:active, .cmp-btn-outlined.cmp-btn-success:enabled:active, .cmp-btn-outlined.cmp-btn-green:enabled:active, .cmp-btn-outlined.cmp-btn-warning:enabled:active, .cmp-btn-outlined.cmp-btn-yellow:enabled:active, .cmp-btn-outlined.cmp-btn-negative:enabled:active, .cmp-btn-outlined.cmp-btn-danger:enabled:active, .cmp-btn-outlined.cmp-btn-red:enabled:active, .cmp-btn-outlined.cmp-btn-royal:enabled:active, .cmp-btn-outlined.cmp-btn-purple:enabled:active
{
  color: #fff;
}

.cmp-btn-link
{
  padding-top: 6px;
  padding-bottom: 6px;

  color: #007aff;
  border: 0;
  background-color: transparent;
}
.cmp-btn-link:enabled:active, .cmp-btn-link.cmp-active:enabled
{
  color: #0062cc;
  background-color: transparent;
}

.cmp-btn-block
{
  font-size: 18px;

  display: block;

  width: 100%;
  margin-bottom: 10px;
  padding: 15px 0;
}

.cmp-btn .cmp-badge
{
  font-size: 14px;

  margin: -2px -4px -2px 4px;

  background-color: rgba(0, 0, 0, .15);
}

.cmp-btn .cmp-badge-inverted,
.cmp-btn:enabled:active .cmp-badge-inverted
{
  background-color: transparent;
}

.cmp-btn-primary:enabled:active .cmp-badge-inverted,
.cmp-btn-positive:enabled:active .cmp-badge-inverted,
.cmp-btn-negative:enabled:active .cmp-badge-inverted
{
  color: #fff;
}

.cmp-btn-block .cmp-badge
{
  position: absolute;
  right: 0;

  margin-right: 10px;
}

.cmp-btn .cmp-icon
{
  font-size: inherit;
}

.cmp-btn.cmp-icon
{
  font-size: 14px;
  line-height: 1.42;
}

.cmp-btn.cmp-fab
{
  width: 56px;
  height: 56px;
  padding: 16px;

  border-radius: 50%;
  outline: none;
}
.cmp-btn.cmp-fab.cmp-btn-mini
{
  width: 40px;
  height: 40px;
  padding: 8px;
}
.cmp-btn.cmp-fab .cmp-icon
{
  font-size: 24px;
  line-height: 24px;

  width: 24px;
  height: 24px;
}

//下拉框，选择控件，日期控件

.cmp-pciker-list li,.cmp-picker,.cmp-picker-inner{box-sizing:border-box;overflow:hidden}.cmp-picker{background-color:#ddd;position:relative;height:200px;border:1px solid rgba(0,0,0,.1);-webkit-user-select:none;user-select:none}.cmp-dtpicker,.cmp-poppicker{left:0;background-color:#eee;box-shadow:0 -5px 7px 0 rgba(0,0,0,.1);-webkit-transition:.3s;width:100%}.cmp-picker-inner{position:relative;width:100%;height:100%;-webkit-mask-box-image:-webkit-linear-gradient(bottom,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent);-webkit-mask-box-image:linear-gradient(top,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent)}.cmp-pciker-list,.cmp-pciker-rule{box-sizing:border-box;padding:0;margin:-18px 0 0;width:100%;height:36px;line-height:36px;position:absolute;left:0;top:50%}.cmp-pciker-rule-bg{z-index:0}.cmp-pciker-rule-ft{z-index:2;border-top:solid 1px rgba(0,0,0,.1);border-bottom:solid 1px rgba(0,0,0,.1)}.cmp-pciker-list{z-index:1;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(750pt) rotateY(0) rotateX(0);transform:perspective(750pt) rotateY(0) rotateX(0)}.cmp-pciker-list li{width:100%;height:100%;position:absolute;text-align:center;vertical-align:middle;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-size:1pc;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#888;padding:0 8px;white-space:nowrap;-webkit-text-overflow:ellipsis;text-overflow:ellipsis;cursor:default;visibility:hidden}.cmp-pciker-list li.highlight,.cmp-pciker-list li.visible{visibility:visible}.cmp-pciker-list li.highlight{color:#222}.cmp-poppicker{position:fixed;z-index:999;border-top:solid 1px #ccc;bottom:0;-webkit-transform:translateY(300px)}.cmp-poppicker.cmp-active{-webkit-transform:translateY(0)}.cmp-android-5-1 .cmp-poppicker{bottom:-300px;-webkit-transition-property:bottom;-webkit-transform:none}.cmp-android-5-1 .cmp-poppicker.cmp-active{bottom:0;-webkit-transition-property:bottom;-webkit-transform:none}.cmp-poppicker-header{padding:6px;font-size:14px;color:#888}.cmp-poppicker-header .cmp-btn{font-size:9pt;padding:5px 10px}.cmp-poppicker-btn-cancel{float:left}.cmp-poppicker-btn-ok{float:right}.cmp-poppicker-clear{clear:both;height:0;line-height:0;font-size:0;overflow:hidden}.cmp-poppicker-body{position:relative;width:100%;height:200px;border-top:solid 1px #ddd}.cmp-poppicker-body .cmp-picker{width:100%;height:100%;margin:0;border:none;float:left}.cmp-dtpicker{position:fixed;z-index:999999;border-top:solid 1px #ccc;bottom:0;-webkit-transform:translateY(300px)}.cmp-dtpicker.cmp-active{-webkit-transform:translateY(0)}.cmp-dtpicker-active-for-page{overflow:hidden}.cmp-android-5-1 .cmp-dtpicker{bottom:-300px;-webkit-transition-property:bottom;-webkit-transform:none}.cmp-android-5-1 .cmp-dtpicker.cmp-active{bottom:0;-webkit-transition-property:bottom;-webkit-transform:none}.cmp-dtpicker-header{padding:6px;font-size:14px;color:#888}.cmp-dtpicker-header button{font-size:9pt;padding:5px 10px}.cmp-dtpicker-header button:last-child{float:right}.cmp-dtpicker-body{position:relative;width:100%;height:200px}.cmp-ios .cmp-dtpicker-body{-webkit-perspective:75pc;perspective:75pc;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.cmp-dtpicker-title h5{display:inline-block;width:20%;margin:0;padding:8px;text-align:center;border-top:solid 1px #ddd;background-color:#f0f0f0;border-bottom:solid 1px #ccc}[data-type=hour] [data-id=title-i],[data-type=hour] [data-id=picker-i],[data-type=month] [data-id=title-i],[data-type=month] [data-id=picker-d],[data-type=month] [data-id=title-d],[data-type=month] [data-id=picker-h],[data-type=month] [data-id=title-h],[data-type=month] [data-id=picker-i],[data-type=time] [data-id=picker-y],[data-type=time] [data-id=picker-m],[data-type=time] [data-id=picker-d],[data-type=time] [data-id=title-y],[data-type=time] [data-id=title-m],[data-type=time] [data-id=title-d],[data-type=date] [data-id=title-i],[data-type=date] [data-id=picker-h],[data-type=date] [data-id=title-h],[data-type=date] [data-id=picker-i]{display:none}.cmp-dtpicker .cmp-picker{width:20%;height:100%;margin:0;float:left;border:none}[data-type=hour] [data-id=picker-h],[data-type=hour] [data-id=title-h],[data-type=datetime] [data-id=picker-h],[data-type=datetime] [data-id=title-h]{border-left:dotted 1px #ccc}[data-type=datetime] .cmp-picker,[data-type=time] .cmp-dtpicker-title h5{width:20%}[data-type=date] .cmp-dtpicker-title h5,[data-type=date] .cmp-picker{width:33.3%}[data-type=hour] .cmp-dtpicker-title h5,[data-type=hour] .cmp-picker{width:25%}[data-type=month] .cmp-dtpicker-title h5,[data-type=month] .cmp-picker,[data-type=time] .cmp-dtpicker-title h5,[data-type=time] .cmp-picker{width:50%}
.cmp-dtpicker-active-for-page{
  overflow: auto;
}